<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <style>
    .el-header {
      background-color: #ebae43;
      color: #555;
      text-align: center;
      line-height: 160px;
    }


    .el-aside {
      background-color: #D3DCE6;
      color: #333;
      text-align: center;
      line-height: 300px;
    }

    .el-main {
      background-image:url("/图片/t01e97975649f2f7ea7.jpg");
    

    }

    body>.el-container {
      margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
      line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
      line-height: 320px;
    }


    .div1 {
      width: 1500px;
      height: 100px;
      border: 1px solid rgb(50, 52, 51);

    }

    .font1 {
      font-size: 60px;
      font-family: "微软雅黑";
      font-style: oblique;
      color: rgb(52, 52, 52);
     
    }

    .div2 {
      width: 1500px;
      height: 100px;
      border: 1px solid rgb(54, 54, 55)
    }

    .content {
      font-size: 30px;
      font-family: "微软雅黑";
     
      color: rgb(34, 35, 34);

      white-space: pre-wrap;
      white-space: -moz-pre-wrap;
      white-space: -pre-wrap;
      white-space: -o-pre-wrap;
      *word-wrap: break-word;
      *white-space: normal;
    }

    .font2 {
      font-size: 40px;
      font-family: "微软雅黑";

      color: rgb(45, 45, 45);
    }
  </style>
</head>


<body>
  <div id="app">




    <el-container>
      <el-header>


      </el-header>
      <el-container>
        <el-aside width="230px">
          <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
            background-color="#696520" text-color="#fff" active-text-color="#ffd04b">
            <el-menu-item index="1">
              <i class="el-icon-menu"></i>
              <span slot="title">导航二</span>
            </el-menu-item>

            <el-menu-item index="2">
              <i class="el-icon-menu"></i>
              <span slot="title">导航二</span>
            </el-menu-item>

            <el-menu-item index="3" disabled>
              <i class="el-icon-document"></i>
              <span slot="title">导航三</span>
            </el-menu-item>

            <el-menu-item index="4">
              <i class="el-icon-setting"></i>
              <span slot="title">导航四</span>
            </el-menu-item>

            <el-menu-item index="4">
              <i class="el-icon-setting"></i>
              <span slot="title">导航四</span>
            </el-menu-item>

            <el-menu-item index="4">
              <i class="el-icon-setting"></i>
              <span slot="title">导航四</span>
            </el-menu-item>

            <el-menu-item index="4">
              <i class="el-icon-setting"></i>
              <span slot="title">导航四</span>
            </el-menu-item>

            <el-menu-item index="4">
              <i class="el-icon-setting"></i>
              <span slot="title">导航四</span>
            </el-menu-item>

            <el-menu-item index="4">
              <i class="el-icon-setting"></i>
              <span slot="title">导航四</span>
            </el-menu-item>

            <el-menu-item index="4">
              <i class="el-icon-setting"></i>
              <span slot="title">导航四</span>
            </el-menu-item>

            <el-menu-item index="4">
              <i class="el-icon-setting"></i>
              <span slot="title">导航四</span>
            </el-menu-item>

            <el-menu-item index="4">
              <i class="el-icon-setting"></i>
              <span slot="title">导航四</span>
            </el-menu-item>

          </el-menu>


        </el-aside>
        <el-container>
          <el-main>

            <div >
              <pre class="font1">                                         天蝎座</pre>

            </div>
            <div >
              <pre class="font2">1.星座简介</pre>
              <pre class="content">
                        中文名称：天蝎座
                        最配的星座：巨蟹座
                        与巨蟹座的配对：100
                        英文名称：Scorpio
                        出生时间：10月24日—11月22日
                        最大特征：渴望
                        星座属性：水象
                        金属：铁
                        守护星：冥王星
                        守护神：哈迪斯
                        三方宫：固定宫
                        掌管宫位：第八宫
                        掌管身体：性器官、鼻
                        幸运数字：9、18、27、36
                        幸运色：紫色、黑色
                        幸运石：黑水晶
                        幸运日：星期二
                        幸运场所：研究室、湖畔、寺庙。
                        幸运方位：西南偏西向、东南偏南向
                        理想的旅居国：挪威、北非、巴拉圭、阿根廷。
</pre>
<pre class="font2">2.性格分析</pre>
<pre class="content">
      这一星座的人对互不相同的和互不相融的事物有特殊的兴趣。他是一个喜欢探究事物的本质并加以区别的人。
      在萧瑟的秋风中降生到这一星座的人粗犷而倔强， 他显得沉闷的个性和紧张的神经会使接近他的人感到压抑和迷惘。
      他的爱情心理常常充满着矛盾。他有一双极其敏锐的眼睛，能洞察和利用人性的弱点和利弊。

    另外，他的神秘性、极端性、好斗性和狂热性，也常常给人们留下深刻的印象。
    无法摆脱的烦恼常常纠缠着他，使他感到精神疲惫。

    天蝎座的人个性冷漠，神秘而性感。他喜欢亲自动手去做；喜欢改善自己的工作和生活环境；
    而不喜欢无所事事和庸庸碌碌的生活，那会使他丧失生机和活力。也有的喜欢自暴自弃，生活在阴影中。
    他从不愿承认失败，如果遭到了挫折，他将会产生强烈的心理变态反应。

    他喜欢戏剧性的场面，会不时地在他前进的道路上导演一幕。他将永远不会忘记自己所受的伤害和失败的教训。

    天蝎座给人印象是冷漠和神秘的，它虽然是水象星座，形象却是沙漠中的蝎子，蝎子往往是很善于伪装的动物，把自己伪装在平静的沙子里，伺机而动。

    有很多天蝎座人个性冷酷、极端，这符合沙漠带给人的印象。不论你谈论什么，他/她的回答总是干巴巴的、让人难以理解。
    不想把自己的事情和内心想法公开出来，这是他/她们经常的说辞。很注重个人隐私，实际上，对于天蝎座人来说，她根本不认为那种真心话大冒险的游戏有什么意义。

    如果天蝎座的人真的动怒了，将会表现得非常冷漠绝情，那么破损的关系将难再修复。

    从这一点来看天蝎座的人冷酷，态度明确。天蝎座的神秘感不会像表面那般肤浅，而是内心的抑制，这也正是天蝎这个星座的一个显著特点。
</pre>
            </div>
          </el-main>

        </el-container>
      </el-container>
    </el-container>




  </div>


  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    new Vue(
      {
        el: "#app"
      }
    )

  </script>

</body>

</html>